<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons 按钮 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Buttons</code>开发，做了一些拓展，可前往
                    <a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/buttons/" target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>
    <!--begin::Row-->
    <div class="row">
        <div class="col-xl-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-success">Success</button>
                            <button type="button" class="btn btn-info">Info</button>
                            <button type="button" class="btn btn-warning">Warning</button>
                            <button type="button" class="btn btn-danger">Danger</button>
                            <button type="button" class="btn btn-primary">Primary</button>
                            <button type="button" class="btn btn-brand">Brand</button>
                            <button type="button" class="btn btn-dark">Dark</button>
                            <button type="button" class="btn btn-light">Light</button>
                            <button type="button" class="btn btn-secondary btn-hover-brand">Secondary</button>
                            <button type="button" class="btn btn-default">Default</button>
                            <button type="button" class="btn btn-link">Link</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以在<code>&lt;button&gt;</code>、
                            <code>&lt;a&gt;</code>、<code>&lt;input&gt;</code> 标签上使用<code>.btn</code>
                        </div>
                        <div class="e-section-content e-section-content--solid">
                            <a class="btn btn-primary" href="#" role="button">Link</a>
                            <button class="btn btn-success" type="submit">Button</button>
                            <input class="btn btn-warning" type="button" value="Input">
                            <input class="btn btn-info" type="submit" value="Submit">
                            <input class="btn btn-danger" type="reset" value="Reset">
                            <a href="#" class="btn btn-dark">Dark</a>
                            <button type="button" class="btn btn-brand">Brand</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以使用<code>.active</code>和<code>.disabled</code>设置按钮的状态</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-brand active">Active</button>
                            <button type="button" class="btn btn-dark active">Active</button>
                            <button type="button" class="btn btn-outline-danger active">Active</button>
                            <button type="button" class="btn btn-primary disabled" disabled>Disabled</button>
                            <button type="button" class="btn btn-success disabled" disabled>Disabled</button>
                            <button type="button" class="btn btn-outline-success disabled" disabled>Disabled</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            尺寸 & 字体
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以添加<code>.btn-lg</code>、<code>.btn-sm</code>设置按钮尺寸</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-success btn-lg">Success</button>
                            <button type="button" class="btn btn-info btn-lg">Info</button>
                            <button type="button" class="btn btn-warning btn-lg">Warning</button>
                            <button type="button" class="btn btn-danger btn-lg">Danger</button>
                        </div>
                    </div>
                    <div class="e-section e-section--last">
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-success btn-sm">Success</button>
                            <button type="button" class="btn btn-info btn-sm">Info</button>
                            <button type="button" class="btn btn-warning btn-sm">Warning</button>
                            <button type="button" class="btn btn-danger btn-sm">Danger</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">
                            你可以使用<code>.btn-font-lg</code>、<code>.btn-font-sm</code>、<code>.btn-upper</code>、<code>.btn-lower</code>
                            设置按钮文字稍大、稍小、大写、小写
                        </div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-info btn-font-lg">Large font</button>
                            <button type="button" class="btn btn-success btn-font-sm">Small font</button>
                            <button type="button" class="btn btn-primary btn-upper">Uppercase</button>
                            <button type="button" class="btn btn-secondary btn-lower">Lowercase</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        你可以使用<code>.btn-wide</code>、<code>.btn-wider</code>、<code>.btn-widest</code>设置按钮水平方向间距
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-primary btn-wide">Wide button</button>
                            <button type="button" class="btn btn-secondary btn-wider">Wider button</button>
                            <button type="button" class="btn btn-success btn-widest">Wides button</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        你可以使用<code>.btn-tall</code>、<code>.btn-taller</code>、<code>.btn-tallest</code>设置按钮垂直方向间距
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-primary btn-tall">Tall button</button>
                            <button type="button" class="btn btn-secondary btn-taller">Taller button</button>
                            <button type="button" class="btn btn-success btn-tallest">Tallest button</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            幽灵按钮
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以使用<code>.btn-outline-*</code>设置钮使用描边效果</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-outline-success">Success</button>
                            <button type="button" class="btn btn-outline-info">Info</button>
                            <button type="button" class="btn btn-outline-warning">Warning</button>
                            <button type="button" class="btn btn-outline-danger">Danger</button>
                            <button type="button" class="btn btn-outline-brand">Brand</button>
                            <button type="button" class="btn btn-outline-dark">Dark</button>
                            <button type="button" class="btn btn-outline-light">Light</button>
                            <button type="button" class="btn btn-outline-primary">Primary</button>
                            <button type="button" class="btn btn-outline-secondary">Secondary</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以使用<code>.btn-outline-hover-*</code>设置按钮在:hover时显示描边效果</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-outline-hover-success">Success</button>
                            <button type="button" class="btn btn-outline-hover-info">Info</button>
                            <button type="button" class="btn btn-outline-hover-warning">Warning</button>
                            <button type="button" class="btn btn-outline-hover-danger">Danger</button>
                            <button type="button" class="btn btn-outline-hover-brand">Brand</button>
                            <button type="button" class="btn btn-outline-hover-dark">Dark</button>
                            <button type="button" class="btn btn-outline-hover-light">Light</button>
                            <button type="button" class="btn btn-outline-hover-primary">Primary</button>
                            <button type="button" class="btn btn-outline-hover-secondary">Secondary</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            胶囊风格
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以使用<code>.btn-pill</code>设置按钮使用胶囊风格</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-primary btn-pill">Primary</button>
                            <button type="button" class="btn btn-brand btn-pill">Solid</button>
                            <button type="button" class="btn btn-secondary btn-pill">Secondary</button>
                            <button type="button" class="btn btn-outline-brand btn-pill">Outline</button>
                            <button type="button" class="btn btn-outline-hover-danger btn-pill">Hover Outline</button>
                            <button type="button" class="btn btn-light btn-hover-brand btn-pill">Hover Solid</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            方形按钮
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以使用<code>.btn-square</code>设置按钮无圆角</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-primary btn-square">Primary</button>
                            <button type="button" class="btn btn-brand btn-square">Solid</button>
                            <button type="button" class="btn btn-secondary btn-square">Secondary</button>
                            <button type="button" class="btn btn-outline-brand btn-square">Outline</button>
                            <button type="button" class="btn btn-outline-hover-danger btn-square">Hover Outline</button>
                            <button type="button" class="btn btn-light btn-hover-brand btn-square">Hover Solid</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-xl-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            悬浮按钮
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以使用<code>.btn-elevate</code>设置按钮悬浮效果</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-success btn-elevate">Success</button>
                            <button type="button" class="btn btn-info btn-elevate">Info</button>
                            <button type="button" class="btn btn-danger btn-elevate">Danger</button>
                            <button type="button" class="btn btn-brand btn-elevate">Brand</button>
                            <button type="button" class="btn btn-dark btn-elevate">Dark</button>
                            <button type="button" class="btn btn-light btn-elevate">Light</button>
                            <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                            <button type="button" class="btn btn-success btn-elevate btn-pill">Success</button>
                            <button type="button" class="btn btn-info btn-elevate btn-pill">Info</button>
                            <button type="button" class="btn btn-danger btn-elevate btn-pill">Danger</button>
                            <button type="button" class="btn btn-brand btn-elevate btn-pill">Brand</button>
                            <button type="button" class="btn btn-dark btn-elevate btn-pill">Dark</button>
                            <button type="button" class="btn btn-light btn-elevate btn-pill">Light</button>
                            <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                            <button type="button" class="btn btn-success btn-elevate btn-pill btn-sm">Success</button>
                            <button type="button" class="btn btn-info btn-elevate btn-pill btn-sm">Info</button>
                            <button type="button" class="btn btn-danger btn-elevate btn-pill btn-sm">Danger</button>
                            <button type="button" class="btn btn-brand btn-elevate btn-pill btn-sm">Brand</button>
                            <button type="button" class="btn btn-dark btn-elevate btn-pill btn-sm">Dark</button>
                            <button type="button" class="btn btn-light btn-elevate btn-pill btn-sm">Light</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以使用<code>.btn-elevate-air</code>设置按钮:hover时悬浮</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-success btn-elevate btn-elevate-air">Success</button>
                            <button type="button" class="btn btn-info btn-elevate btn-elevate-air">Info</button>
                            <button type="button" class="btn btn-danger btn-elevate btn-elevate-air">Danger</button>
                            <button type="button" class="btn btn-warning btn-elevate btn-elevate-air">Warning</button>
                            <button type="button" class="btn btn-brand btn-elevate btn-elevate-air">Brand</button>
                            <div class="e-separator e-separator--space-sm e-separator--border-dashed"></div>
                            <button type="button" class="btn btn-success btn-elevate btn-pill btn-elevate-air">Success</button>
                            <button type="button" class="btn btn-info btn-elevate btn-pill btn-elevate-air">Info</button>
                            <button type="button" class="btn btn-danger btn-elevate btn-pill btn-elevate-air">Danger</button>
                            <button type="button" class="btn btn-warning btn-elevate btn-pill btn-elevate-air">Warning</button>
                            <button type="button" class="btn btn-brand btn-elevate btn-pill btn-elevate-air">Brand</button>
                            <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                            <button type="button" class="btn btn-success btn-elevate btn-pill btn-elevate-air btn-sm">Success</button>
                            <button type="button" class="btn btn-info btn-elevate btn-pill btn-elevate-air btn-sm">Info</button>
                            <button type="button" class="btn btn-danger btn-elevate btn-pill btn-elevate-air btn-sm">Danger</button>
                            <button type="button" class="btn btn-warning btn-elevate btn-pill btn-elevate-air btn-sm">Warning</button>
                            <button type="button" class="btn btn-brand btn-elevate btn-pill btn-elevate-air btn-sm">Brand</button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            图标 + 文字按钮
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">使用 Fontawesome 5 图标</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-primary"><i class="fa fa-dollar-sign"></i> Primary
                            </button>
                            <button type="button" class="btn btn-brand"><i class="fa fa-tag"></i> Solid</button>
                            <button type="button" class="btn btn-secondary"><i class="fa fa-undo"></i> Secondary
                            </button>
                            <button type="button" class="btn btn-outline-brand"><i class="fa fa-code"></i> Outline
                            </button>
                            <button type="button" class="btn btn-outline-hover-danger"><i class="fa fa-search"></i>
                                Hover Outline
                            </button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">使用 Lineawesome 图标</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-light btn-elevate-hover btn-pill"><i
                                    class="la la-user"></i> Hover Flat
                            </button>
                            <button type="button" class="btn btn-brand btn-elevate btn-pill"><i class="la la-bank"></i>
                                Solid
                            </button>
                            <button type="button" class="btn btn-secondary btn-elevate btn-pill"><i
                                    class="la la-bullhorn"></i> Secondary
                            </button>
                            <button type="button" class="btn btn-outline-brand btn-elevate btn-pill"><i
                                    class="la la-cloud-download"></i> Outline
                            </button>
                            <button type="button" class="btn btn-outline-hover-info btn-elevate btn-pill"><i
                                    class="la la-copy"></i> Hover Outline
                            </button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">使用 Flaticon 图标的胶囊风格按钮</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-light btn-elevate-hover btn-pill"><i
                                    class="flaticon-cogwheel"></i> Hover Flat
                            </button>
                            <button type="button" class="btn btn-brand btn-elevate btn-pill"><i
                                    class="flaticon-business"></i> Solid
                            </button>
                            <button type="button" class="btn btn-secondary btn-elevate btn-pill"><i
                                    class="flaticon-notes"></i> Secondary
                            </button>
                            <button type="button" class="btn btn-outline-brand btn-elevate btn-pill"><i
                                    class="flaticon-bell"></i> Outline
                            </button>
                            <button type="button" class="btn btn-outline-hover-info btn-elevate btn-pill"><i
                                    class="flaticon-light"></i> Hover Outline
                            </button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            只有图标
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <div class="e-section e-section--last">
                        <div class="e-section-info">使用 Fontawesome 5 图标</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-primary btn-icon"><i class="fa fa-dollar-sign"></i>
                            </button>
                            <button type="button" class="btn btn-brand btn-icon"><i class="fa fa-tag"></i></button>
                            <button type="button" class="btn btn-secondary btn-icon"><i class="fa fa-undo"></i></button>
                            <button type="button" class="btn btn-outline-brand btn-icon"><i class="fa fa-code"></i>
                            </button>
                            <button type="button" class="btn btn-dark btn-icon"><i class="fa fa-check"></i></button>
                            <button type="button" class="btn btn-danger btn-icon"><i class="fa fa-car"></i></button>
                            <button type="button" class="btn btn-outline-hover-danger btn-icon"><i
                                    class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">使用 Lineawesome 图标</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-light btn-elevate-hover btn-icon"><i
                                    class="la la-user"></i></button>
                            <button type="button" class="btn btn-brand btn-elevate btn-icon"><i class="la la-bank"></i>
                            </button>
                            <button type="button" class="btn btn-secondary btn-elevate btn-icon"><i
                                    class="la la-bullhorn"></i></button>
                            <button type="button" class="btn btn-outline-brand btn-elevate btn-icon"><i
                                    class="la la-cloud-download"></i></button>
                            <button type="button" class="btn btn-primary btn-elevate btn-icon"><i
                                    class="la la-cogs"></i>
                            </button>
                            <button type="button" class="btn btn-outline-dark btn-elevate btn-icon"><i
                                    class="la la-calendar"></i></button>
                            <button type="button" class="btn btn-outline-hover-info btn-elevate btn-icon"><i
                                    class="la la-copy"></i></button>
                        </div>
                    </div>
                    <div class="e-separator e-separator--space-sm  e-separator--border-dashed"></div>
                    <div class="e-section e-section--last">
                        <div class="e-section-info">使用 Flaticon 图标的圆形按钮</div>
                        <div class="e-section-content e-section-content--solid">
                            <button type="button" class="btn btn-light btn-elevate-hover btn-circle btn-icon"><i
                                    class="flaticon-cogwheel"></i></button>
                            <button type="button" class="btn btn-brand btn-elevate btn-circle btn-icon"><i
                                    class="flaticon-business"></i></button>
                            <button type="button" class="btn btn-secondary btn-elevate btn-circle btn-icon"><i
                                    class="flaticon-notes"></i></button>
                            <button type="button" class="btn btn-outline-brand btn-elevate btn-circle btn-icon"><i
                                    class="flaticon-bell"></i></button>
                            <button type="button" class="btn btn-warning btn-elevate btn-circle btn-icon"><i
                                    class="flaticon-technology-2"></i></button>
                            <button type="button" class="btn btn-danger btn-elevate btn-circle btn-icon"><i
                                    class="flaticon-technology-1"></i></button>
                            <button type="button" class="btn btn-outline-info btn-elevate btn-circle btn-icon"><i
                                    class="flaticon-bell"></i></button>
                            <button type="button" class="btn btn-outline-hover-info btn-elevate btn-circle btn-icon"><i
                                    class="flaticon-light"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>
    <!--end::Row-->
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>